<template>
  <div>
      <el-card class="box-card">
          <span class="col-span">关键字搜索：</span>
            <el-select
                v-model="tagValue"
                filterable
                clearable
                remote
                placeholder="请输入姓名或邮箱前缀"
                :remote-method="remoteMethod"
                :loading="loading"
                @change="selectFn"
                >
                <el-option
                    v-for="item in options"
                    :key="item.index"
                    :label="item.label"
                    :value="item.value"
                   >
                    <span style="float: left">{{ item.label }}</span>
                    <span style="float: right">{{ item.value }}</span>
                </el-option>
            </el-select>
        <el-table
            :data="tableData"
            border
            style="width: 100%;margin-top:10px"
            :header-cell-style="{background:'#eef1f6'}"
            max-height=800
            v-loading="loadingTable">
            <el-table-column label="员工姓名" property="name" align="center" fixed="left"></el-table-column>
            <el-table-column label="邮箱前缀" property="ldap" align="center"></el-table-column>
            <el-table-column label="部门" property="dept" align="center" width=180></el-table-column>
            <el-table-column label="员工ID" property="workcode" align="center"></el-table-column>
            <el-table-column label="员工类型" align="center" property="type" width=130></el-table-column>
            <el-table-column label="司龄" property="working_years" align="center"></el-table-column>
            <el-table-column label="入职时间" property="joinworkdate" align="center" width=110></el-table-column>
            <el-table-column label="主技术领域" width="180" align="center">
                <template slot-scope="scope">
                    <div v-for="(v,i) in scope.row.main_technical_fields" :key="i">
                        {{v.name}}
                    </div>
                </template> 
            </el-table-column>
            <el-table-column label="附加能力" align="center" width=150>
                <template slot-scope="scope">
                    <div v-if="scope.row.additional_capabilities.length>0">
                        <el-tooltip placement="top" effect="light">
                        <div slot="content" v-for="(v,i) in scope.row.additional_capabilities" :key="i">{{v.display}} </div>
                        <el-tag>
                            {{scope.row.additional_capabilities[0].display.length > 15 ? scope.row.additional_capabilities[0].display.substring(0,14)+ "..." : scope.row.additional_capabilities[0].display+ "..."}}
                        </el-tag>
                        </el-tooltip>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="人员状态" align="center" property="status_show" width=130 ></el-table-column>
            <el-table-column label="工作模式" align="center" width=130>
                <template slot-scope="scope">
                    <div v-for="(v,i) in scope.row.working_mode" :key="i">
                        {{v.name}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="业务领域" align="center" width=180>
                <template slot-scope="scope">
                    <div v-for="(v,i) in scope.row.business_area" :key="i">
                        {{v.name}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="编程语言" align="center" width=130>
                <template slot-scope="scope">
                    <div v-for="(v,i) in scope.row.programing_language" :key="i">
                        {{v.name}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="软件平台" align="center" width=130>
                <template slot-scope="scope">
                    <div v-for="(v,i) in scope.row.software_platform" :key="i">
                        {{v.name}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="所在城市" align="center" width=100>
                <template slot-scope="scope">
                    {{scope.row.city}}
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top:10px;text-align: center;"
            background
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-size="baseSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
            >
        </el-pagination>
      </el-card>
  </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    
    mounted(){
        this.getTableDataFn()
    },
    data(){
        return{
            loadingTable:false,
            keywords:'',
            tableData:[],
            total:0,
            baseSize:10,
            current:1,
            deptArrParam:[],
            tagValue:'',
            options:[],
            loading:false,
            keywordsPramas:'',
        }
    },
    methods:{
        selectFn(item){
            this.current = 1;
            this.keywordsPramas = item
            this.getTableDataFn()
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                let keywordsPrama  = {}
                keywordsPrama["status"] = 0
                keywordsPrama["keywords"] = query
                keywordsPrama["departments"] = this.deptArrParam;
                setTimeout(() => {
                    this.loading = false;
                    this.$axios({
                        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_select_employee' ,
                        method: "post",
                        headers: getHeaderName(),
                        data:keywordsPrama
                    }).then(res => {
                        this.options = res.data.data
                    })
                }, 200);
            } else {
                this.options = [];
            }
        },
        handleCurrentChange(val) {
            this.current = val;
            this.getTableDataFn();
        },
        getTableDataFn(){
            this.loadingTable = true
            let data = {}
            data.page = 1;
            data.keywords = this.keywordsPramas;
            data.departments = [];
            data.status=0
            this.$axios({
                url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_employee`,
                method: "post",
                headers: getHeaderName(),
                data: data
            }).then((res=>{
                this.loadingTable = false
                this.tableData = res.data.data.data
                this.total = res.data.data.totalCount;
            }))
        }
    }
}
</script>

<style>

</style>